
<template>
    <p>Has published books:</p>
    <span>{{ hasPublishedBooks }}</span>
		<p>Now:</p>
    <span>{{ now }}</span>
		<p>Full Name:{{ fullName }}</p>
    <input type="text" v-model="fullName">
</template>


<script setup lang="ts">
import { reactive,computed ,ref} from 'vue'
interface Iauthor {
  name: string
  books: string[]
}

const author0 = reactive<Iauthor>({
  name: 'zhangsan',
  books: ['book1', 'book2']
})
const hasPublishedBooks = computed(() => author0.books.length > 0 ? 'Yes' : 'No')
const now = Date.now()
const first = ref('weiyi')
const last  = ref('jingjing')
const fullName = computed({
	get(){
		return first.value + ' ' + last.value
	},
	set(newValue){
		[first.value, last.value] = newValue.split(' ')
	}
})

</script>